import getState from "@/api/state";
import Infocard from "@/template/infocard/infocard";
import ZuiEchart from "@/template/zuiEchart/zuiEchart";
import { getSumFromListLoss } from "@/utils/math";
import React from "react";
import { useState } from "react";
import { useEffect } from "react";

const Home7 = ({ condition }) => {
    const [message, setMessage] = useState("暂无数据");
    const [loading, setLoading] = useState(false)
    const [state1, setState1] = useState({
        "dayList": ["2016", "2017", "2018", "2019", "2020", "2021"],
        "data": []
    })
    const [state2, setState2] = useState({
        "dayList": ["2022/01", "2022/02", "2022/03", "2022/04", "2022/05", "2022/06", "2022/07", "2022/08", "2022/09", "2022/10", "2022/11", "2022/12"],
        "data": []
    })


    useEffect(() => {
        getState({
            apiUrl: "/cifgp-core-api/synt/trendMonthAndYear",
            condition: { ...condition, cType: "syntlostCust", dateType: "tYear", statDate: condition.dateType === "tYear" ? condition.statDate : "" },
            state: state1,
            setState: setState1,
            setLoading,
            setMessage,
        })
        getState({
            apiUrl: "/cifgp-core-api/synt/trendMonthAndYear",
            condition: { ...condition, cType: "syntlostCust", dateType: "tMonth", statDate: condition.dateType === "tMonth" ? condition.statDate : "" },
            state: state2,
            setState: setState2,
            setLoading,
            setMessage,
        })
    }, [condition])
    return (
        <>
            {/* 客户流失情况 */}
            <ZuiEchart
                message={message}
                authSwitch={true}
                condition={condition}
                loading={loading}
                style={{ width: "45%" }}
                title="客户流失统计"
                subtitle="（单位：客户量）"
                unit="个"
                btn={["年", "月"]}
                defaultModule="adBar"
                childrenPosition="right"
                childrenWidth="150px"
                useXis
                data={[
                    state1,
                    state2,
                ]}
            >
                {/* <Infocard
                    style={{ display: "flex", flexDirection: "column", justifyContent: "space-around", height: "100%" }}
                    itemStyle={{ display: "flex", justifyContent: "center", alignItems: "center" }}
                    data={
                        [
                            {
                                title: "本年流失数量",
                                value: getSumFromListLoss(state1.data)
                            },
                            {
                                title: "本月流失数量",
                                value: getSumFromListLoss(state2.data)
                            }
                        ]
                    }
                /> */}
            </ZuiEchart>
        </>
    )
}
export default Home7;